<template>
    <div id="leftnav">
        <el-menu active-text-color="rgb(77, 112, 255)" :collapse="$store.isCollapse" background-color="#fff"
            class="el-menu-vertical-demo" :default-active="route.matched[0].path" text-color="#333" :router='true'
            :unique-opened=true>
            <div v-show="!$store.isCollapse" style="paddingt-top:10px; min-width: 200px;">
                <img style="width:20%;hegiht: 15px; margin: 0 auto; padding-top: 5px; " src="../img/logo.png" />
                <h3
                    style="font-size: 18px;  padding-top: 5px; padding-bottom: 10px;  text-align: center; color: #409eff;">
                    河南省人口与城镇化</h3>
            </div>
            <div v-show="$store.isCollapse">
                <img style="width:51px;hegiht: 51px; padding-top:10px; margin-bottom: 5px; padding-left:8px;"
                    src="../img/logo.png" />
            </div>
            <template v-for="item in menulist" :key="item.id">
                <template v-if="!item.children">
                    <el-menu-item :index="item.route" v-show="item.show" :route="item.route" @click="lo(item)">
                        <el-icon>
                            <component :is="item.ico"></component>
                        </el-icon>
                        <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                </template>
                <el-sub-menu v-if="item.children" :index="item.id">
                    <template #title>
                        <el-icon>
                            <component :is="item.ico" />
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item-group v-for='child in item.children' :key='child.id'>
                        <el-menu-item :index="child.route" :route="child.route">
                            <div style="width: 10px;"></div>
                            <span slot="title">{{ child.name }}</span>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMenuStore } from '../store/menu';
const grade = ref('');
const router = useRouter();
// const unit = ref('');
// const role = ref('');
const $store = useMenuStore();
const route = useRoute();
onMounted(() => {
    grade.value = localStorage.getItem('grade');
    if (grade.value == '4') {
        menulist.value = xzmenulist.value;
    } else if (grade.value != '1') {
        menulist.value[1].children.pop();
    }
})
const menulist = ref([
    {
        id: "1",
        name: "大数据地图",
        ico: "Star",
        route: "/index",
        show: true,
        collapse: true,
        children: [
            {
                id: "1-1",
                name: "人口与城镇化",
                ico: "House",
                route: "/chart"
            }
        ]
    },
    {
        id: "4",
        name: "行政区划",
        ico: "DataLine",
        route: "/l_xzqh",
        show: true,
        collapse: true,
        children: [
            {
                id: "4-1",
                name: "区划管理",
                ico: "House",
                route: "/areamain"
            },
            {
                id: "4-4",
                name: "区划转移管理",
                ico: "House",
                route: "/transer"
            }
            ,
            {
                id: "4-2",
                name: "最新区划",
                ico: "House",
                route: "/newarea"
            }
        ]
    },

    {
        id: "5",
        name: "地图绘制",
        ico: "DataLine",
        route: "/l_dthz",
        show: true,
        collapse: true,
        children: [
            {
                id: "5-1",
                name: "普查小区图",
                ico: "House",
                route: "/plotmap"
            },
            {
                id: "5-2",
                name: "建筑物地图",
                ico: "House",
                route: "/jzwmap"
            },
            {
                id: "5-3",
                name: "绘图成果",
                ico: "House",
                route: "/drawResList"
            },
        ]
    },
    {
        id: "7",
        name: "数据维护",
        ico: "DataLine",
        route: "/l_sjwh",
        show: true,
        collapse: true,
        children: [
            // {
            //     id: "7-1",
            //     name: "工作部署",
            //     ico: "House",
            //     route: "/l_sjwh/gzbs"
            // },
            // {
            //     id: "7-2",
            //     name: "劳动力调查",
            //     ico: "House",
            //     route: "/workman"
            // },
            {
                id: "7-3",
                name: "人口数据",
                ico: "House",
                route: "/workman"
            },
            {
                id: "7-4",
                name: "GDP数据",
                ico: "House",
                route: "/gdpmain"
            }
        ]
    },
    {
        id: "8",
        name: "系统设置",
        ico: "SwitchButton",
        show: true,
        collapse: true,
        children: [
            {
                id: "8-1",
                name: "用户列表",
                ico: "House",
                route: "/userList"
            },
            {
                id: "8-2",
                name: "修改密码",
                ico: "House",
                route: "/changePWD"
            },

        ]
    }
]);
const xzmenulist = ref([
    {
        id: "1",
        name: "大数据地图",
        ico: "Star",
        route: "/index",
        show: true,
        collapse: true,
        children: [
            {
                id: "1-1",
                name: "人口与城镇化",
                ico: "House",
                route: "/chart"
            }
        ]
    },
    {
        id: "4",
        name: "行政区划",
        ico: "DataLine",
        route: "/l_xzqh",
        show: true,
        collapse: true,
        children: [
            {
                id: "4-1",
                name: "区划管理",
                ico: "House",
                route: "/areamain"
            },
            {
                id: "4-4",
                name: "区划转移管理",
                ico: "House",
                route: "/transer"
            }
        ]
    },

    {
        id: "5",
        name: "地图绘制",
        ico: "DataLine",
        route: "/l_dthz",
        show: true,
        collapse: true,
        children: [
            {
                id: "5-1",
                name: "(乡镇,村)定位",
                ico: "House",
                route: "/village"
            },
            {
                id: "5-2",
                name: "普查区(村居委会)",
                ico: "House",
                route: "/cwh"
            },
            {
                id: "5-3",
                name: "普查小区",
                ico: "House",
                route: "/xzpcxq"
            },
            {
                id: "5-4",
                name: "建筑物",
                ico: "House",
                route: "/jzw"
            },
            {
                id: "5-5",
                name: "绘图成果",
                ico: "House",
                route: "/drawresult"
            }
        ]
    },
    // {
    //     id: "7",
    //     name: "数据维护",
    //     ico: "DataLine",
    //     route: "/l_sjwh",
    //     show: true,
    //     collapse:true,
    //     children: [
    //         {
    //             id: "7-1",
    //             name: "工作部署",
    //             ico: "House",
    //             route: "/l_sjwh/gzbs"
    //         },
    //         {
    //             id: "7-2",
    //             name: "劳动力调查",
    //             ico: "House",
    //             route: "/l_sjwh/ldldc"
    //         },
    //         {
    //             id: "7-3",
    //             name: "人口数据",
    //             ico: "House",
    //             route: "/l_sjwh/rksj"
    //         },
    //         {
    //             id: "7-4",
    //             name: "GDP数据",
    //             ico: "House",
    //             route: "/l_sjwh/GDPsj"
    //         },
    //         {
    //             id: "7-5",
    //             name: "城乡属性",
    //             ico: "House",
    //             route: "/l_sjwh/cxsx"
    //         }
    //     ]
    // },
    {
        id: "8",
        name: "系统设置",
        ico: "SwitchButton",
        show: true,
        collapse: true,
        children: [

            {
                id: "8-2",
                name: "修改密码",
                ico: "House",
                route: "/changePWD"
            },

        ]
    }
]);


</script>

<style lang="less">
#leftnav {
    height: 100%;

}

.el-menu-item-group__title {
    padding: 0;
}

.el-menu--popup {
    background: #0f2438;
}

#cheader .mheader {
    background: #000;
}
</style>

<style scoped>
.lwlftnav .el-menu-demo .logoimg {
    width: 100%;
    transform: translate(0px, -20px);
}

.el-menu {
    height: 100%;
    background: #001529;
    border-right: none;

}

style attribute {
    --el-menu-bg-color: #409eff;
}

.el-menu-item.is-active {
    background: #4079c8;
    color: #fff;
}

.el-sub-menu .el-icon {
    color: #fff;
}

.el-sub-menu__title * {
    color: #fff;
}
</style>